<template>
  <div>
    <h1>商店</h1>
    <el-row :gutter="30">
        <el-col
          :offset="index > 0 ? 0 : 1"
          :span="4"
          v-for="(item, index) in Products.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )"
          :key="index"
        >
          <el-card style="width:100%;height:350px;" :body-style="{ padding: '0px' }" shadow="hover">
            <el-button
              style="padding:0"
              @click="
                SelectMovie(item.ProductID, item.ProductName);
                drawer = true;
              "
            >
              <img :src="item.ProductImg" class="image" />
              <div style="padding: 14px;">
                <span>{{ item.ProductName }}</span>
                <div>
                  <el-button type="text" style="float:right">详情</el-button>
                </div>
              </div>
            </el-button>
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Products: [],
      currentPage: 1,
      pagesize: 5,
      height: "",
      drawer: false,
      id: +new Date()
    };
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    SelectMovie(ProductID,Name) {
      
      this.$store.commit("UpdateMovieID", ProductID);
     this.$store.commit("UpdateMovieName",Name);
      this.id = +new Date();
    },
  },
  computed: {},
  mounted() {},
  created() {
    this.Ajax.get("api/Products/GetProducts").then((M) => {
      this.Products = M.data;
    });
    this.height = window.innerHeight - 100;
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: white;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>